<script lang="ts">
  import { onMount } from "svelte";
  import * as echarts from "echarts";

  let chartDom: HTMLElement;
  let chart: echarts.ECharts;
  export let pageData: any = {};

  // 基准分辨率
  const baseHeight = 1080;
  let scale = 1;

  // 计算缩放比例
  const calculateScale = () => {
    const currentHeight = window.innerHeight;
    if (currentHeight < baseHeight) {
      scale = currentHeight / baseHeight;
    } else {
      scale = 1;
    }
    return scale;
  };

  // 创建图表配置
  const createOption = () => {
    // 计算当前缩放比例
    calculateScale();
    
    return {
      tooltip: {
        trigger: "item",
        textStyle: {
          fontSize: Math.max(10, Math.round(14 * scale))
        }
      },
      series: [
        {
          top: Math.max(5, Math.round(10 * scale)) + "px",
          name: "经销商来源",
          type: "pie",
          radius: [
            Math.max(15, Math.round(30 * scale)) + "%", 
            Math.max(30, Math.round(60 * scale)) + "%"
          ],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: "outside",
            fontSize: Math.max(10, Math.round(14 * scale)),
            color: "rgba(255, 255, 255, 0.8)"
          },
          emphasis: {
            label: {
              show: true,
              fontSize: Math.max(16, Math.round(24 * scale)),
              fontWeight: "bold",
              color: "#fff",
            },
          },
          labelLine: {
            show: true,
            length: Math.max(10, Math.round(15 * scale)),
            length2: Math.max(10, Math.round(15 * scale))
          },
          data: [
            { value: pageData.levelOneCount || 0, name: "一级经销商" },
            { value: pageData.levelTwoCount || 0, name: "二级经销商" },
            { value: pageData.levelThreeCount || 0, name: "三级经销商" },
            { value: pageData.levelFourCount || 0, name: "四级经销商" },
            { value: pageData.levelFiveCount || 0, name: "五级经销商" },
            { value: pageData.levelSixCount || 0, name: "共享大使" },
          ],
        },
      ],
    };
  };

  onMount(() => {
    chartDom = document.getElementById("pieChart");
    chart = echarts.init(chartDom);
    chart.setOption(createOption());

    // 处理窗口大小变化
    const resizeHandler = () => {
      chart?.resize();
      // 更新图表配置以应用新的缩放比例
      chart?.setOption(createOption(), true);
    };
    
    window.addEventListener("resize", resizeHandler);

    return () => {
      window.removeEventListener("resize", resizeHandler);
      chart?.dispose();
    };
  });

  // 添加响应式声明，监听数据变化
  $: if (chart && pageData) {
    const option = createOption() || {};
    option.series[0].data = [
      { value: pageData.levelOneCount || 0, name: "一级经销商" },
      { value: pageData.levelTwoCount || 0, name: "二级经销商" },
      { value: pageData.levelThreeCount || 0, name: "三级经销商" },
      { value: pageData.levelFourCount || 0, name: "四级经销商" },
      { value: pageData.levelFiveCount || 0, name: "五级经销商" },
      { value: pageData.levelSixCount || 0, name: "共享大使" },
    ];
    chart.setOption(option);
  }
</script>

<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
  <div id="pieChart" style="width: 100%; height: 100%;"></div>
</div>
